<!--------------------------------
 - @Author: Ronnie Zhang
 - @LastEditor: Ronnie Zhang
 - @LastEditTime: 2023/12/05 21:29:56
 - @Email: zclzone@outlook.com
 - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 --------------------------------->

<template>
  <CommonPage>
    <template #action>
      <!--      <n-button v-permission="'AddUser'" type="primary" @click="handleAdd()">-->
      <!--        <i class="i-material-symbols:add mr-4 text-18" />-->
      <!--        创建新用户-->
      <!--      </n-button>-->
    </template>


    <AppCard bordered bg='#fafafc dark:black' class='mb-30 min-h-60 rounded-4'>
      <form class='flex justify-between p-16' @submit.prevent='getAllRankData()'>
        <n-space wrap :size='[32, 16]'>
          <MeQueryItem label='商品名称' :label-width='100'>
            <n-input
              v-model:value='queryItems.productName'
              type='text'
              placeholder='请输入商品名称'
              clearable
            />
          </MeQueryItem>

          <MeQueryItem label='SKU' :label-width='100'>
            <n-input
              v-model:value='queryItems.sku'
              type='text'
              placeholder='请输入商品sku'
              clearable
            />
          </MeQueryItem>


          <MeQueryItem label='spu' :label-width='100'>
            <n-input
              v-model:value='queryItems.spu'
              type='text'
              placeholder='请输入商品spu'
              clearable
            />
          </MeQueryItem>



      <MeQueryItem label='一级类目' :label-width='100'>
        <n-select v-model:value='queryItems.type1' clearable :options='lists.type1.value'
                  label-field='label'
                  value-field='value' filterable />
      </MeQueryItem>

      <MeQueryItem label='二级类目' :label-width='100'>
        <n-select v-model:value='queryItems.type2' clearable :options='lists.type2.value'
                  label-field='label'
                  value-field='label' filterable />
      </MeQueryItem>


      <MeQueryItem label='三级类目' :label-width='100'>
        <n-select v-model:value='queryItems.type3' clearable :options='lists.type3.value'
                  label-field='label'
                  value-field='label' filterable />
      </MeQueryItem>


      <MeQueryItem label='四级类目' :label-width='100'>
        <n-select v-model:value='queryItems.type4' clearable :options='lists.type4.value'
                  label-field='label'
                  value-field='label' filterable />
      </MeQueryItem>


      <MeQueryItem label='五级类目' :label-width='100'>
        <n-select v-model:value='queryItems.type5' clearable :options='lists.type5.value'
                  label-field='label'
                  value-field='label' filterable />
      </MeQueryItem>

          <MeQueryItem label='是否参与闪购' :label-width='100'>
            <n-select
              v-model:value='queryItems.joinQuick'
              clearable
              :options="[
            { label: '参与', value: 'Venta Flash' },
            { label: '未参与', value: '' },
          ]"
            />
          </MeQueryItem>


          <MeQueryItem label='是否缺货' :label-width='100'>
            <n-select
              v-model:value='queryItems.lessFlag'
              clearable
              :options="[
            { label: '缺货', value: 'AGOTADO' },
            { label: '未缺货', value: 'AÑADIR A LA BOLSA' },
          ]"
            />
          </MeQueryItem>

          <MeQueryItem label='是否全球' :label-width='100'>
            <n-select
              v-model:value='queryItems.nacionalName'
              clearable
              :options="[
            { label: '全球', value: 'Internacional' },
            { label: '本土', value: 'Envío Nacional' },
            { label: 'QuickShip', value: 'QuickShip' },
          ]"
            />
          </MeQueryItem>
        </n-space>
        <div class='flex-shrink-0'>
          <n-button ghost type='primary' @click='handleReset'>
            <i class='i-fe:rotate-ccw mr-4' />
            重置
          </n-button>
          <n-button attr-type='submit' class='ml-20' type='primary'>
            <i class='i-fe:search mr-4' />
            搜索
          </n-button>
        </div>
      </form>
    </AppCard>


    <div style='margin-top: 16px'>
      <n-grid x-gap='12' :cols='4' :item-responsive='true' :x-gap='36' :y-gap='24'>
        <n-gi v-for='item in data'>

          <n-card class=' hvr-bob'>
            <div style='width: 100%;height: 80%;overflow: hidden'>
              <n-image :src='item.productImage' width='100%' style='transform: scale(1.2)'
                       :object-fit="'cover'"></n-image>
            </div>

            <n-space style='margin-top: 8px;'>
              <n-tag type='success' size='small'>{{ item.nacionalName }}</n-tag>
              <n-tag type='error' size='small'>{{ item.rank }}</n-tag>
              <n-tag type='warning' size='small'>排名类型：{{ item.rankType }}</n-tag>
            </n-space>


            <n-ellipsis style='max-width: 100%;margin-top: 8px;font-weight: bold'>
              {{ item.productName }}
            </n-ellipsis>

            <n-ellipsis style='max-width: 100%;margin-top: 8px;font-weight: bold'>
              SKU: {{ item.sku }}
            </n-ellipsis>


            <p style='color: red;font-weight: bold;padding-top: 3px'>{{ item.productPrice }}</p>
            <p style='color: red;font-weight: bold;padding-top: 3px'>銷量：{{ item.nearSaleCountInt }}</p>
            <p style='color: red;font-weight: bold;padding-top: 3px'>
              评论数：{{ item.startText }}</p>

          </n-card>

        </n-gi>
      </n-grid>
    </div>


  </CommonPage>
</template>

<script setup>
import { NAvatar, NButton, NImage, NSwitch, NTag } from 'naive-ui'
import { formatDateTime } from '@/utils'
import { MeCrud, MeQueryItem, MeModal } from '@/components'
import { useCrud } from '@/composables'
import api from './api'

defineOptions({ name: 'UserMgt' })

const $table = ref(null)
/** QueryBar筛选参数（可选） */
const queryItems = ref({})

onMounted(() => {
  $table.value?.handleSearch()
})

async function handleReset() {
  for (const key in queryItems.value) {
    queryItems.value[key] = null
  }
  await nextTick()
  // pagination.page = 1
  getAllRankData()
}

const lists = {
  type1: ref([]),
  type2: ref([]),
  type3: ref([]),
  type4: ref([]),
  type5: ref([])
}

const getAllType = (type) => {
  api.requestAllType(type).then(res => {
    lists[`type${type}`].value = res.data
  })
}

onMounted(() => {
  getAllType(1)
  getAllType(2)
  getAllType(3)
  getAllType(4)
  getAllType(5)
  getAllRankData()

})

const data = ref({})
const getAllRankData = () => {
  api.read(queryItems.value).then(res => {
    data.value = res.data
  })
}

const columns = [
  {
    title: '头像',
    key: 'productImage',
    width: 80,
    fixed: 'left',
    render: (row) =>
      h(NImage, {
        size: 'medium',
        src: row.productImage,
        width: 64
      })
  },
  { title: '产品名', fixed: 'left', key: 'productName', width: 150, ellipsis: { tooltip: true } },
  {
    title: '产品价格',
    key: 'productPriceDecimal',
    fixed: 'left',
    width: 150,
    ellipsis: { tooltip: true }
  },
  {
    title: '产品地址',
    key: 'productUrl',
    width: 180,
    ellipsis: { tooltip: true },
    render(row) {
      return h('a', {
        href: row['productUrl'],
        target: '_blank'
      }, row['productUrl'])
    }
  },
  { title: '是否全球', key: 'nacionalName', width: 150, ellipsis: { tooltip: true } },
  { title: '总评论数', key: 'startText', width: 150, ellipsis: { tooltip: true } },
  { title: '90天购买人数', key: 'nearSaleCountInt', width: 150, ellipsis: { tooltip: true } },
  { title: 'SKU', key: 'sku', width: 150, ellipsis: { tooltip: true } },
  { title: 'SPU', key: 'spu', width: 200, ellipsis: { tooltip: true } },
  { title: '排名', key: 'rank', width: 150, ellipsis: { tooltip: true } },
  { title: '排名情况', key: 'rankType', width: 150, ellipsis: { tooltip: true } },
  { title: '总评价分数', key: 'allCommentScore', width: 150, ellipsis: { tooltip: true } },
  { title: '总评论数量', key: 'allCommentCount', width: 150, ellipsis: { tooltip: true } },
  { title: '本土评分数', key: 'locationCommentScore', width: 150, ellipsis: { tooltip: true } },
  { title: '本土评数量', key: 'locationCommentCount', width: 150, ellipsis: { tooltip: true } },
  { title: '竞品店铺名称', key: 'shopName', width: 150, ellipsis: { tooltip: true } },
  {
    title: '竞品店铺地址', key: 'shopName', width: 150, ellipsis: { tooltip: true }, render(row) {
      return h('a', {
        href: row['shopUrl'],
        target: '_blank'
      }, row['shopUrl'])
    }
  },
  { title: '竞品店铺总评分数', key: 'shopScore', width: 150, ellipsis: { tooltip: true } },
  { title: '竞品店铺总产品数量', key: 'shopProductCount', width: 150, ellipsis: { tooltip: true } },
  { title: '竞品上架时间', key: 'uploadDate', width: 150, ellipsis: { tooltip: true } },
  { title: '上架天数', key: 'updateDayCount', width: 150, ellipsis: { tooltip: true } },
  { title: '是否参加闪购活动', key: 'joinQuick', width: 150, ellipsis: { tooltip: true } },
  { title: '一级类目', key: 'type1', width: 150, ellipsis: { tooltip: true } },
  { title: '二级类目', key: 'type2', width: 150, ellipsis: { tooltip: true } },
  { title: '三级类目', key: 'type3', width: 150, ellipsis: { tooltip: true } },
  { title: '四级类目', key: 'type4', width: 150, ellipsis: { tooltip: true } },
  { title: '五级类目', key: 'type5', width: 150, ellipsis: { tooltip: true } },
  { title: '库存情况', key: 'stockCount', width: 150, ellipsis: { tooltip: true } },
  {
    title: '竞品本土评论区最新时间',
    key: 'locationCommentLastTime',
    width: 150,
    ellipsis: { tooltip: true }
  },
  { title: '缺货状态', key: 'lessFlag', width: 150, ellipsis: { tooltip: true } },
  { title: '产品描述', key: 'describe', width: 150, ellipsis: { tooltip: true } }
  //
  // {
  //   title: '操作',
  //   key: 'actions',
  //   width: 320,
  //   align: 'right',
  //   fixed: 'right',
  //   hideInExcel: true,
  //   render(row) {
  //     return [
  //       h(
  //         NButton,
  //         {
  //           size: 'small',
  //           type: 'primary',
  //           secondary: true,
  //           onClick: () => handleOpenRolesSet(row)
  //         },
  //         {
  //           default: () => '分配角色',
  //           icon: () => h('i', { class: 'i-carbon:user-role text-14' })
  //         }
  //       ),
  //       h(
  //         NButton,
  //         {
  //           size: 'small',
  //           type: 'primary',
  //           style: 'margin-left: 12px;',
  //           onClick: () => handleOpen({ action: 'reset', title: '重置密码', row, onOk: onSave })
  //         },
  //         {
  //           default: () => '重置密码',
  //           icon: () => h('i', { class: 'i-radix-icons:reset text-14' })
  //         }
  //       ),
  //
  //       h(
  //         NButton,
  //         {
  //           size: 'small',
  //           type: 'error',
  //           style: 'margin-left: 12px;',
  //           onClick: () => handleDelete(row.id)
  //         },
  //         {
  //           default: () => '删除',
  //           icon: () => h('i', { class: 'i-material-symbols:delete-outline text-14' })
  //         }
  //       )
  //     ]
  //   }
  // }
]

async function handleEnable(row) {
  row.enableLoading = true
  try {
    await api.update({ id: row.id, enable: !row.enable })
    row.enableLoading = false
    $message.success('操作成功')
    $table.value?.handleSearch()
  } catch (error) {
    row.enableLoading = false
  }
}

function handleOpenRolesSet(row) {
  const roleIds = row.roles.map((item) => item.id)
  handleOpen({
    action: 'setRole',
    title: '分配角色',
    row: { id: row.id, username: row.username, roleIds },
    onOk: onSave
  })
}

const {
  modalRef,
  modalFormRef,
  modalForm,
  modalAction,
  handleAdd,
  handleDelete,
  handleOpen,
  handleSave
} = useCrud({
  name: '用户',
  initForm: { enable: true },
  refresh: () => $table.value?.handleSearch()
})

function onSave() {
  if (modalAction.value === 'setRole') {
    return handleSave({
      api: () => api.update(modalForm.value),
      cb: () => $message.success('分配成功')
    })
  } else if (modalAction.value === 'reset') {
    return handleSave({
      api: () => api.resetPwd(modalForm.value.id, modalForm.value),
      cb: () => $message.success('密码重置成功')
    })
  }
  handleSave()
}
</script>
